<template>
	<view class="container">
		<!-- 问题列表 -->
		<view class="questions_container">
			<view class="title">选择问题类型</view>
			<view class="questions">
				<view 
				@click="select(item)" 
				v-for="(item, index) in questionList" 
				:key="index" 
				class="question"
				:class="selectedQuestion.indexOf(item) > -1 ? 'active': ''">{{item}}</view>
			</view>
		</view>
		<!-- 问题描述 -->
		<textarea v-model="detail" class="question_detail" placeholder="请描述一下您的问题" />
		<view class="upload_image_container">
			<view class="title">上传图片（{{uploadImags.length}}/4）</view>
			<view class="upload_container">
				<view class="upload_btn" @click="chooseImage">+</view>
				<view class="upload_image" v-for="(item, index) in uploadImags">
					<image :src="item"></image>
					<view @click="delImage(index)" class="iconfont icon-htmal5icon19"></view>
				</view>
			</view>
		</view>
		<view class="submit">提交</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				questionList: [ '功能问题', '性能问题', '体验问题', '其他' ],
				selectedQuestion: [], // 选中问题的列表
				detal: '', // 问题描述
				uploadImags: [], // 上传的图片列表
			};
		},
		methods: {
			select(e) {
				// 如果已经存在selectedQuestion，要去掉，否则加入
				const index = this.selectedQuestion.findIndex(item => {
					return item === e;
				})
				if (index > -1) {
					// 找到
					this.selectedQuestion.splice(index, 1);
				} else {
					// 没找到
					this.selectedQuestion.push(e);
				}
			},
			async chooseImage() {
				// 判断是否超出选择的限制
				if (this.uploadImags.length >= 4) {
					// 已经不能再选
					uni.showToast({
						icon: 'none',
						title: '已经超出选择限制'
					})
				} else {
					// 判断用户应选择了多少张
					// 剩余还能选多少张
					const canChoose = 4 - this.uploadImags.length;
					const [error, res] = await uni.chooseImage({count: canChoose})
					this.uploadImags = this.uploadImags.concat(res.tempFilePaths);
				}
				
			},
			delImage(index) {
				this.uploadImags.splice(index, 1);
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #fafafa;
	}
	.container {
		.title {
			font-size: 26rpx;
			color:#434343;
		}
		.questions_container {
			background: #fff;
			margin: 20rpx;
			padding: 15rpx 30rpx;

			.questions {
				display: flex;
				flex-wrap: wrap;
				padding-top: 20rpx;
				justify-content: space-between;
				.question {
					background: #EDEDED;
					color:#545353;
					border-radius: 23px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					width: 181rpx;
					height: 46rpx;
					margin-bottom: 20rpx;
				}

				.question.active {
					background: #FFE6E6;
					border: 1rpx solid #EA4350;
					color: #EA4350;
				}
			}
			.questions::after {
				content: '';
				width: 181rpx;
			}
		}
		.question_detail {
		  height: 391rpx;
		  width: 711rpx;
		  background: #fff;
		  margin: 0 20rpx;
		  padding: 20rpx;
		  font-size: 26rpx;
		  box-sizing: border-box;
		}
		.upload_image_container {
			margin: 20rpx;
			padding:  20rpx 18rpx;
			background-color: #fff;
			.upload_container {
				margin-top: 18rpx;
				display: flex;
				flex-wrap: wrap;
				.upload_btn {
					background-color: #D8D8D8;
					color: #A6A6A6;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					height: 128rpx;
					font-size: 80rpx;
				}
				.upload_image {
					margin-left: 9rpx;
					position: relative;
					.iconfont {
						position: absolute;
						right: 0;
						top: -20rpx;
						color:  #E03440;
						font-size: 44rpx;
						opacity: .8;
					}
					image {
						width: 128rpx;
						height: 128rpx;
					}
				}
			}
		}
		.submit {
			width: 711rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 30rxp;
			border-radius: 34rpx;
			background-color:  #EA4350;
			margin-left: 21rpx;
		}
	}
</style>

